<!-- 地址组件 -->
<template>
    <el-cascader
            :options="cities"
            :props="props"
            @active-item-change="handleItemChange"
            @change="change"
            :value="initValue"
    ></el-cascader>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    @Component({})
    export default class DiscountAddress extends Vue {
        cities = []             // options：可选数据源
        props = {               // props：是一个对象，相关配置如下
            value: 'address_code',
            label: 'address_name',
            children: 'cities'
        }
        initValue = []         // value：选中项绑定值

        // active-item-change：当父级选项发生变化是触发，各父级选项组成的数组（所以在调用的时候，默认参数要传数组）
        async handleItemChange (ids) {
            if(ids.length === 0){
                this.cities = await this.getAddr('1','', false);
            }else if (ids.length === 1){
                for(let i = 0; i < this.cities.length; i++){
                    if (this.cities[i].address_code == ids[0]){
                        this.cities[i].cities = await this.getAddr('2',ids[0], false);
                    }
                }
            }else if (ids.length === 2){
                for (let i = 0; i < this.cities.length; i++) {
                    if (this.cities[i].address_code === ids[0]) {
                        for (let j = 0; j < this.cities[i].cities.length; j++) {
                            if (this.cities[i].cities[j].address_code === ids[1]) {
                                this.cities[i].cities[j].cities = await this.getAddr('3',ids[1], true);
                            }
                        }
                    }
                }
            }
        }

        // 获取地址请求
        async getAddr (addressLevel: string, addressCode: string, isEnd: boolean) {
            let params = {
                addressLevel: addressLevel,
                addressCode: addressCode
            }
            let response = await this.$http.get('fbank/constants/addressCode',{params},{ loading: false })
            if(!isEnd){
                response.data.forEach(v => v.cities = []);
            }
            return response.data;
        }
        mounted () {
            this.handleItemChange([]);
        }
        // change：当绑定事件触发时，回调是当前值
        change (areas) {
            this.$emit('input', areas);
        }
        async init (initValue) {
            this.initValue = initValue
            setTimeout(async () => {
                for (let i = 0; i < this.cities.length; i++) {
                    if (this.cities[i].address_code === initValue[0]) {
                        this.cities[i].cities = await this.getAddr('2',initValue[0], false);
                        for (let j = 0; j < this.cities[i].cities.length; j++) {
                            if (this.cities[i].cities[j].address_code === initValue[1]) {
                                this.cities[i].cities[j].cities = await this.getAddr('3',initValue[1], true);
                            }
                        }
                    }
                }
            }, 400)
            this.$emit('input', initValue);
        }
    }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">

</style>